<template>
  <view class="page">
    <!-- 顶部车辆卡片（展示） -->
    <view class="car-card" v-if="infoReady">
      <image class="car-img" :src="data_info.logo" mode="aspectFill"></image>
      <view class="car-text">
        <view>{{data_info.brand}}、{{curCarName}}</view>
        <view class="sub">{{curCarPrice}}</view>
        <view class="vin">{{base.vin}}</view>
      </view>
    </view>

    <!-- 车辆信息（只展示） -->
    <view class="section">
      <view class="section-title">车辆信息</view>
      <view class="form-card readonly">
        <view class="cell"><view class="label">上牌时间</view><view class="value">{{ base.reg_date }}</view></view>
        <view class="cell"><view class="label">车牌</view><view class="value">{{ base.plate_no }}</view></view>
        <view class="cell"><view class="label">公里数</view><view class="value">{{ base.km }}</view></view>
        <view class="cell"><view class="label">内外色</view><view class="value">{{ base.color }}</view></view>
        <view class="cell"><view class="label">过户次数</view><view class="value">{{ base.transfer_times }}</view></view>
        <view class="cell"><view class="label">是否运营</view><view class="value">{{ base.is_operate }}</view></view>
        <view class="cell"><view class="label">所在地</view><view class="value">{{ base.city }}</view></view>
      </view>
    </view>

    <!-- 图片信息（只展示 + 可预览） -->
    <view class="section">
      <view class="section-title">图片信息</view>
      <view class="form-card readonly">
        <view class="cell" v-for="f in photoFields" :key="f.key">
          <view class="label">{{ f.label }}</view>
          <view class="value">
            <text>{{ pics[f.key] ? '已上传' : '—' }}</text>
            <image
              v-if="pics[f.key]"
              class="thumb"
              :src="pics[f.key]"
              mode="aspectFill"
              @tap.stop="previewPic(f.key)"
            />
          </view>
          <text class="ic">👁</text>
        </view>
      </view>
    </view>

    <!-- 预估价格（只读） -->
    <view class="section">
      <view class="section-title">预估价格</view>
      <view class="kv-card">
        <view class="row"><text class="k">车况等级</text><view class="v v-static">{{ levelText }}</view></view>
        <view class="row"><text class="k">零售价</text><view class="v v-static">{{ price.retailMin || '—' }} - {{ price.retailMax || '—' }}</view></view>
        <view class="row"><text class="k">计划收购价格</text><view class="v v-static">{{ price.planBuy || '—' }}</view></view>
      </view>
      <view class="readonly-hint">价格来自上一步评估，此处不可修改</view>
    </view>

    <!-- ————— 新增三组表单（来自不同表，但提交到一个接口） ————— -->

    <!-- 补充信息（表：supplement） -->
    <view class="section">
      <view class="section-title">补充信息</view>
      <view class="form-card">
        <picker mode="date" :value="supp.pay_time" @change="onDateChange">
          <view class="cell req">
            <view class="label">打款时间*</view>
            <view class="value">{{ supp.pay_time || '请选择' }}</view>
            <text class="ic">📅</text>
          </view>
        </picker>

        <view class="cell req">
          <view class="label">采购价（万）*</view>
          <view class="value"><input class="ipt" type="digit" v-model="supp.purchase_price" placeholder="请输入" /></view>
        </view>

        <view class="cell req">
          <view class="label">产权登记证*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('suppPics.property_cert')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="suppPics.property_cert" class="thumb" :src="suppPics.property_cert" @tap.stop="previewLocal(suppPics.property_cert)" />
            </view>
          </view>
        </view>

        <view class="cell req">
          <view class="label">钥匙数*</view>
          <view class="value"><input class="ipt" type="number" v-model="supp.key_count" placeholder="请输入" /></view>
        </view>

        <!-- 以下三项改为传图（全部必填） -->
        <view class="cell req">
          <view class="label">抵押状态证明*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('suppPics.mortgage_cert')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="suppPics.mortgage_cert" class="thumb" :src="suppPics.mortgage_cert" @tap.stop="previewLocal(suppPics.mortgage_cert)" />
            </view>
          </view>
        </view>

        <view class="cell req">
          <view class="label">违章状态证明*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('suppPics.violate_cert')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="suppPics.violate_cert" class="thumb" :src="suppPics.violate_cert" @tap.stop="previewLocal(suppPics.violate_cert)" />
            </view>
          </view>
        </view>

        <view class="cell req">
          <view class="label">被执行证明*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('suppPics.executed_cert')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="suppPics.executed_cert" class="thumb" :src="suppPics.executed_cert" @tap.stop="previewLocal(suppPics.executed_cert)" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 交易信息（表：trade） -->
    <view class="section">
      <view class="section-title">交易信息</view>
      <view class="form-card">
        <view class="cell req">
          <view class="label">产权人*</view>
          <view class="value"><input class="ipt" v-model="trade.owner" placeholder="请输入" /></view>
        </view>
        <view class="cell req">
          <view class="label">联系电话*</view>
          <view class="value"><input class="ipt" type="number" v-model="trade.mobile" placeholder="请输入" /></view>
        </view>
        <view class="cell req">
          <view class="label">所在地*</view>
          <view class="value"><input class="ipt" v-model="trade.address" placeholder="请输入" /></view>
        </view>

        <view class="cell req">
          <view class="label">车辆来源*</view>
          <picker :range="sourceOpts" :value="trade.source_index" @change="e=>trade.source_index=+e.detail.value">
            <view class="value value-select">{{ sourceOpts[trade.source_index] }}</view>
          </picker>
        </view>

        <view class="cell req">
          <view class="label">身份证号/统一信用代码*</view>
          <view class="value"><input class="ipt" v-model="trade.id_or_code" placeholder="请输入" /></view>
        </view>

        <view class="cell req">
          <view class="label">身份证正反/营业执照*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('tradePics.id_or_license')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="tradePics.id_or_license" class="thumb" :src="tradePics.id_or_license" @tap.stop="previewLocal(tradePics.id_or_license)" />
            </view>
          </view>
        </view>

        <!-- 过户方式：单行对齐 -->
        <view class="cell req">
          <view class="label">过户方式*</view>
          <view class="value value-radio">
            <label class="radio" @tap="trade.transfer_type='先户'">
              <radio :checked="trade.transfer_type==='先户'"/><text>先户</text>
            </label>
            <label class="radio" @tap="trade.transfer_type='先款'">
              <radio :checked="trade.transfer_type==='先款'"/><text>先款</text>
            </label>
            <label class="radio" @tap="trade.transfer_type='定金'">
              <radio :checked="trade.transfer_type==='定金'"/><text>定金</text>
            </label>
          </view>
        </view>

        <view class="cell req" v-if="trade.transfer_type==='定金'">
          <view class="label">定金*</view>
          <view class="value"><input class="ipt" type="digit" v-model="trade.deposit_amount" placeholder="请输入金额" /></view>
        </view>
      </view>
    </view>

    <!-- 受方收款信息（表：payee） -->
    <view class="section">
      <view class="section-title">受方收款信息</view>
      <view class="form-card">
        <view class="cell req"><view class="label">收款人*</view><view class="value"><input class="ipt" v-model="payee.name" placeholder="请输入" /></view></view>
        <view class="cell req"><view class="label">开户行*</view><view class="value"><input class="ipt" v-model="payee.bank" placeholder="请输入" /></view></view>
        <view class="cell req"><view class="label">账号*</view><view class="value"><input class="ipt" v-model="payee.account" placeholder="请输入" /></view></view>
        <view class="cell req"><view class="label">收款人电话*</view><view class="value"><input class="ipt" type="number" v-model="payee.mobile" placeholder="请输入" /></view></view>
      </view>
    </view>

    <!-- 经办记录（保留） -->
    <view class="section">
      <view class="section-title">经办记录</view>
      <view class="timeline">
        <view class="t-row t-hd">
          <text class="t-col">节点</text>
          <text class="t-col">经办人/岗位</text>
          <text class="t-col">时间</text>
          <text class="t-col">结果</text>
        </view>
        <view class="t-row" v-for="(item,index) in task_list" :key="index" :style="item.status == 2 ? 'color:#ff0000' : ''">
          <text class="t-col">{{item.step_name}}</text>
          <text class="t-col">{{item.cname}} / {{item.group_name}}</text>
          <text class="t-col">{{item.create_time}}</text>
          <text class="t-col">{{item.status_name}}</text>
        </view>
      </view>
    </view>

    <!-- 意见栏（保留） -->
    <view class="section" v-if="base.my_info && base.my_info.status == 2">
      <view class="section-title">意见栏</view>
      <view class="op-box">
        <textarea v-model="opinion" placeholder="填写审核意见（可选）" maxlength="300" auto-height />
        <view class="hint">当前节点：<text class="danger">{{ task_list[task_list.length-1].step_name }}</text></view>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="bottom-btn-box">
      <button class="btn btn-secondary" @tap="onSubmitAll">提交</button>
      <button class="btn btn-gray" v-if="base.my_info && base.my_info.status == 2" @tap="onReject">驳回</button>
      <button class="btn btn-primary" v-if="base.my_info && base.my_info.status == 2" @tap="onApprove">通过</button>
    </view>
  </view>
</template>

<script>
import common_config from '@/static/js/common.js'
const config = common_config.config
let userInfo
let that

export default {
  data(){
    return{
      // —— 状态/顶部展示 —— //
      id:0, infoReady:false, nodeName:'核训',
      price_id:0,
      base:{ vin:'', reg_date:'', plate_no:'', km:'', color:'', transfer_times:'', is_operate:'', city:'', my_info:null },
      data_info:{carlist:[]}, car_index:-1,

      // —— 图片（只读） —— //
      pics:{},
      photoFields:[
        { key:'license', label:'行驶证' },
        { key:'front', label:'车身正前' },
        { key:'front_left', label:'车身左前' },
        { key:'front_right', label:'车身右前' },
        { key:'rear', label:'车身正后' },
        { key:'rear_left', label:'车身左后' },
        { key:'rear_right', label:'车身右后' },
        { key:'dash_meter', label:'仪表台（里程）' },
        { key:'front_seat', label:'前排座椅' },
        { key:'rear_seat', label:'后排座椅' },
        { key:'nameplate', label:'车身铭牌' }
      ],

      // —— 评估价格（只读） —— //
      levelRange:[{name:'优（S）',level:'S'},{name:'良（A）',level:'A'},{name:'一般（B）',level:'B'},{name:'差（C）',level:'C'}],
      levelIndex:0,
      price:{ retailMin:'', retailMax:'', planBuy:'' },

      // —— 经办记录/意见（保留） —— //
      task_list:[],
      opinion:'',

      // —— 新表：补充信息 —— //
      supp:{ pay_time:'', purchase_price:'', key_count:'' },
      // 改为全图：产权/抵押/违章/被执行 4 项
      suppPics:{ property_cert:'', mortgage_cert:'', violate_cert:'', executed_cert:'' },

      // —— 新表：交易信息 —— //
      trade:{ owner:'', mobile:'', address:'', source_index:0, id_or_code:'', transfer_type:'先户', deposit_amount:'' },
      tradePics:{ id_or_license:'' },
      sourceOpts:['个人','车商','渠道','其他'],

      // —— 新表：受方收款信息 —— //
      payee:{ name:'', bank:'', account:'', mobile:'' },
    }
  },
  computed:{
    curCarName(){ return this.data_info.carlist?.[this.car_index]?.name || '' },
    curCarPrice(){ return this.data_info.carlist?.[this.car_index]?.price || '' },
    levelText(){ return this.levelRange[this.levelIndex]?.name || '' }
  },
  onLoad(op){
    that = this
    this.price_id = Number(op.price_id||0)
    this.nodeName = op.node || this.nodeName
    common_config.common_if_login(()=>{}, ()=>{
      userInfo=uni.getStorageSync('userInfo'); try{ userInfo=JSON.parse(userInfo) }catch(e){}
      this.fetchDetail(); this.load_task();
    })
  },
  methods:{
    onDateChange(e){ this.supp.pay_time = e.detail.value || '' },

    // —— 加载详情（只读数据） —— //
    fetchDetail(){
      if(!this.price_id){ common_config.calert('缺少id'); return }
      uni.showLoading({title:'加载中'})
      uni.request({
        url: `${config.request_url}/index/pinggu/step1_detail?token=${userInfo?.token||''}`,
        method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
        data:{ id:this.price_id },
        success: ({data})=>{
          if(+data.code===200 && data.data){
            const d=data.data
            this.base = {
              vin:d.vin||'', reg_date:d.reg_date||'', plate_no:d.plate_no||'',
              km:d.km||'', color:d.color||'', transfer_times:d.transfer_times||'',
              is_operate:d.is_operate||'', city:d.city||'',
              status:d.status||'', my_info:d.my_info||null
            }
            const lv = Array.isArray(d.levels) && d.levels[0] ? d.levels[0] : null
            if(lv){
              const idx = this.levelRange.findIndex(x=>x.level===lv.level)
              this.levelIndex = idx>=0?idx:0
              this.price.retailMin = lv.min!==undefined?String(lv.min):''
              this.price.retailMax = lv.max!==undefined?String(lv.max):''
              this.price.planBuy   = lv.plan!==undefined?String(lv.plan):''
            }
            const pm = d.pics || {}
            Object.keys(pm).forEach(k=>{ this.$set(this.pics, k, this.normalizeUrl(pm[k])) })
            this.car_index = d.car_index || -1
            if(this.base.vin) this.fetchTopCard(this.base.vin)
            this.infoReady = true
          }else{
            common_config.calert(data.msg||'加载失败')
          }
        },
        complete:()=>uni.hideLoading()
      })
    },
    fetchTopCard(vin){
      uni.request({
        url: `${config.request_url}/index/pinggu/step1?token=${userInfo?.token||''}`,
        method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
        data:{ vin },
        success: (res)=>{ const r=res.data||{}; if(r.code==200){ this.data_info=r.data||{carlist:[]} } }
      })
    },

    // —— 经办记录（保留） —— //
    load_task(){
      uni.request({
        url: `${config.request_url}/index/pinggu/load_task_list?token=${userInfo.token}&cid=${that.id}`,
        method:'GET',
        success: (res) => {
          res = res.data
          if(res.code == 200){ this.task_list = res.data }
        }
      })
    },

    // —— 审批（保留） —— //
    onApprove(){
      uni.showModal({
        title:'确认通过',
        content:'将提交审核意见并推进流程，是否继续？',
        success: (r)=>{
          if(!r.confirm) return
          uni.request({
            url: `${config.request_url}/index/pinggu/agree_step?token=${userInfo?.token||''}`,
            method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
            data:{ id:this.id, opinion:this.opinion || '', node:this.nodeName || '' },
            success: ({data})=>{
              if(+data.code===200){ uni.navigateTo({ url:'/pages/index/sub_success' }) }
              else{ common_config.calert(data.msg || '操作失败') }
            },
            fail:()=> common_config.calert('网络异常')
          })
        }
      })
    },
    onReject(){
      uni.showModal({
        title:'确认驳回',
        content:'驳回将回退流程，是否继续？',
        confirmText:'驳回', confirmColor:'#ef4444',
        success: (r)=>{
          if(!r.confirm) return
          uni.request({
            url: `${config.request_url}/index/pinggu/refuse_step?token=${userInfo.token}`,
            method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
            data:{ bak:this.opinion || '', cid:this.id },
            success: (res) => {
              res = res.data
              if(res.code==200){ uni.navigateTo({ url:'/pages/index/sub_success?act=refuse' }) }
              else{ common_config.calert(res.msg) }
            }
          })
        }
      })
    },

    // —— 选图与预览 —— //
    chooseImage(path){
      uni.chooseImage({
        count:1, sizeType:['compressed'], sourceType:['album','camera'],
        success: (r)=>{ this.setByPath(path, r.tempFilePaths[0]) }
      })
    },
    previewLocal(url){ if(url) uni.previewImage({urls:[url]}) },
    previewPic(key){
      const url = this.pics[key]
      if(!url) return
      const urls = this.photoFields.map(f=>this.pics[f.key]).filter(Boolean)
      const idx = urls.indexOf(url)
      uni.previewImage({ urls, current: idx>=0?idx:0 })
    },

    // —— 校验（全部必填，含图片） —— //
    validateAll(){
      if(!this.base.vin) return '缺少VIN，无法提交'
      // supp
      if(!this.supp.pay_time) return '请选择打款时间'
      if(this.supp.purchase_price==='' || isNaN(Number(this.supp.purchase_price))) return '请填写采购价（万）'
      if(this.supp.key_count==='' || isNaN(parseInt(this.supp.key_count))) return '请填写钥匙数'
      if(!this.suppPics.property_cert) return '请上传产权登记证'
      if(!this.suppPics.mortgage_cert) return '请上传抵押状态证明'
      if(!this.suppPics.violate_cert) return '请上传违章状态证明'
      if(!this.suppPics.executed_cert) return '请上传被执行证明'
      // trade
      if(!this.trade.owner) return '请填写产权人'
      if(!this.trade.mobile) return '请填写联系电话'
      if(!/^\d{6,}$/.test(String(this.trade.mobile))) return '联系电话格式不正确'
      if(!this.trade.address) return '请填写所在地'
      if(!(this.sourceOpts[this.trade.source_index])) return '请选择车辆来源'
      if(!this.trade.id_or_code) return '请填写身份证号/统一信用代码'
      if(!this.tradePics.id_or_license) return '请上传身份证正反/营业执照'
      if(!this.trade.transfer_type) return '请选择过户方式'
      if(this.trade.transfer_type==='定金' && (this.trade.deposit_amount==='' || isNaN(Number(this.trade.deposit_amount)))) return '请填写定金金额'
      // payee
      if(!this.payee.name) return '请填写收款人'
      if(!this.payee.bank) return '请填写开户行'
      if(!this.payee.account) return '请填写账号'
      if(!this.payee.mobile) return '请填写收款人电话'
      return ''
    },

    // —— 提交（仅三大类到 /index/caigou/step1_submit）—— //
    async onSubmitAll(){
      const err = this.validateAll()
      if(err){ return common_config.calert(err) }

      uni.showLoading({title:'提交中'})
      try{
        // 1) 上传本地图片为线上 URL
        const needUpload = {
          'suppPics.property_cert': this.suppPics.property_cert,
          'suppPics.mortgage_cert': this.suppPics.mortgage_cert,
          'suppPics.violate_cert': this.suppPics.violate_cert,
          'suppPics.executed_cert': this.suppPics.executed_cert,
          'tradePics.id_or_license': this.tradePics.id_or_license
        }
        for(const k in needUpload){
          const v = needUpload[k]
          if(v && !/^https?:\/\//.test(v)){
            const url = await this.uploadSingle(v)
            this.setByPath(k, url)
          }
        }

        // 2) 组装载荷（字段名说明：新增 *_cert 用于三项证明图片）
        const payload = {
          vin: this.base.vin,
          supp: {
            pay_time: this.supp.pay_time,
            purchase_price: this.supp.purchase_price,
            key_count: this.supp.key_count,
            property_cert: this.suppPics.property_cert,
            mortgage_cert: this.suppPics.mortgage_cert,
            violate_cert: this.suppPics.violate_cert,
            executed_cert: this.suppPics.executed_cert
          },
          trade: {
            owner: this.trade.owner,
            mobile: this.trade.mobile,
            address: this.trade.address,
            source: this.sourceOpts[this.trade.source_index],
            id_or_code: this.trade.id_or_code,
            id_or_license: this.tradePics.id_or_license,
            transfer_type: this.trade.transfer_type,
            deposit_amount: this.trade.transfer_type==='定金'?this.trade.deposit_amount:''
          },
          payee: {
            name: this.payee.name,
            bank: this.payee.bank,
            account: this.payee.account,
            mobile: this.payee.mobile
          }
        }

        // 3) 单接口提交（TP5 友好：数组用 foo[bar]）
        await new Promise((resolve,reject)=>{
          uni.request({
            url: `${config.request_url}/index/caigou/step1_submit?token=${userInfo?.token||''}`,
            method:'POST',
            header:{'Content-Type':'application/x-www-form-urlencoded'},
            data: {
              vin: payload.vin,

              'supp[pay_time]': payload.supp.pay_time,
              'supp[purchase_price]': payload.supp.purchase_price,
              'supp[key_count]': payload.supp.key_count,
              'supp[property_cert]': payload.supp.property_cert,
              'supp[mortgage_cert]': payload.supp.mortgage_cert,
              'supp[violate_cert]': payload.supp.violate_cert,
              'supp[executed_cert]': payload.supp.executed_cert,

              'trade[owner]': payload.trade.owner,
              'trade[mobile]': payload.trade.mobile,
              'trade[address]': payload.trade.address,
              'trade[source]': payload.trade.source,
              'trade[id_or_code]': payload.trade.id_or_code,
              'trade[id_or_license]': payload.trade.id_or_license,
              'trade[transfer_type]': payload.trade.transfer_type,
              'trade[deposit_amount]': payload.trade.deposit_amount,

              'payee[name]': payload.payee.name,
              'payee[bank]': payload.payee.bank,
              'payee[account]': payload.payee.account,
              'payee[mobile]': payload.payee.mobile
            },
            success: ({data})=>{
              (+data.code===200)? resolve(): reject(data.msg||'保存失败')
            },
            fail:()=>reject('网络异常')
          })
        })

        uni.hideLoading()
        uni.showToast({title:'保存成功',icon:'success'});
		 setTimeout(()=>uni.navigateTo({ url:'/pages/index/sub_success' }),400);
      }catch(e){
        uni.hideLoading()
        common_config.calert(String(e||'提交失败'))
      }
    },

    // —— 工具方法 —— //
    setByPath(path, val){
      const seg = path.split('.'); let o=this
      for(let i=0;i<seg.length-1;i++) o=o[seg[i]]
      this.$set(o, seg[seg.length-1], val)
    },
    normalizeUrl(u){
      if(!u) return ''
      u = String(u).trim()
      if(/^https?:\/\//i.test(u)) return u
      if(/^\/\//.test(u)) return 'https:' + u
      const base = (config.cdn || config.request_url || '').replace(/\/+$/,'')
      if(!base) return u
      if(u[0] !== '/') u = '/' + u
      return base + u
    },
    uploadSingle(localPath){
      return new Promise((resolve,reject)=>{
        uni.uploadFile({
          url: `${config.request_url}/index/common/upload?token=${userInfo?.token||''}`,
          filePath: localPath, name: 'file',
          success: (r)=>{
            try{
              const data = JSON.parse(r.data||'{}')
              if(+data.code===200 && data.data?.src){ resolve(data.data.src) }
              else reject(data.msg||'上传失败')
            }catch(err){ reject('上传异常') }
          },
          fail:()=>reject('网络异常')
        })
      })
    }
  }
}
</script>

<style>
.page{background:#f6f8ff;min-height:100vh;padding:32rpx 32rpx 160rpx;}
/* 顶部卡片 */
.car-card{background:#fff;border-radius:20rpx;padding:20rpx;display:flex;gap:20rpx;align-items:center;margin-bottom:28rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.05);}
.car-img{width:220rpx;height:130rpx;border-radius:12rpx;flex-shrink:0;}
.car-text{flex:1;font-size:28rpx;color:#333;line-height:1.6;}
.car-text .sub{color:#777;font-size:26rpx;}
.vin{font-size:26rpx;color:#888;margin-top:4rpx;}
/* 区块 */
.section{background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:28rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.04);}
.section-title{font-size:30rpx;font-weight:600;color:#333;margin-bottom:12rpx;}
/* 表单通用 */
.form-card{background:#fff;border:1rpx solid #e8eef6;border-radius:16rpx;overflow:hidden;}
.form-card.readonly .cell{opacity:.95}
.cell{display:flex;align-items:center;padding:22rpx 18rpx;border-bottom:1rpx solid #edf2f7;}
.cell:last-child{border-bottom:none;}
.label{width:260rpx;font-size:28rpx;color:#475569;}
.value{flex:1;display:flex;align-items:center;justify-content:flex-end;font-size:28rpx;color:#111827;}
.value-select{color:#111827;}
.value-radio{justify-content:flex-end;gap:28rpx;flex-wrap:nowrap}
.value-radio .radio{display:flex;align-items:center;gap:8rpx;}
.ipt{width:100%;text-align:right;font-size:28rpx;}
.ic{width:44rpx;text-align:right;font-size:28rpx;color:#9aa5b1;margin-left:10rpx;}
.thumb{width:72rpx;height:72rpx;border-radius:8rpx;margin-left:12rpx;}
.uploader{display:flex;align-items:center}
.iconfont.icon-tupian{font-size:40rpx;line-height:1}
/* 价格只读 */
.kv-card{border:1rpx solid #e8eef6;border-radius:16rpx;overflow:hidden;}
.row{display:flex;align-items:center;justify-content:space-between;padding:22rpx 18rpx;border-bottom:1rpx solid #edf2f7;}
.row:last-child{border-bottom:none;}
.k{font-size:28rpx;color:#475569;}
.v-static{color:#111827;}
.readonly-hint{margin-top:12rpx;color:#6b7280;font-size:24rpx;}
/* 经办记录 */
.timeline{border:1rpx solid #e8eef6;border-radius:16rpx;overflow:hidden;}
.t-row{display:flex;padding:20rpx 16rpx;border-bottom:1rpx solid #edf2f7;font-size:26rpx;color:#374151;}
.t-row:last-child{border-bottom:none;}
.t-hd{background:#f9fbff;font-weight:600;color:#111827;}
.t-col{flex:1;}
/* 意见栏 */
.op-box{border:1rpx solid #e8eef6;border-radius:16rpx;padding:16rpx;}
.op-box textarea{width:100%;font-size:28rpx;color:#111827;min-height:120rpx;}
.hint{margin-top:10rpx;color:#6b7280;font-size:24rpx;}
.danger{color:#ef4444}
/* 底部按钮 */
.bottom-btn-box{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:18rpx 28rpx;display:flex;gap:16rpx;box-shadow:0 -4rpx 10rpx rgba(0,0,0,0.06);}
.btn{flex:1;height:90rpx;line-height:90rpx;border-radius:45rpx;font-size:30rpx;font-weight:600;text-align:center;}
.btn-secondary{background:#2563eb;color:#fff;}
.btn-gray{background:#f1f5f9;color:#111827;}
.btn-primary{background:#22c55e;color:#fff;}
.btn:active{opacity:.92;}
.req .label:after{content:'*';color:#ef4444;margin-left:8rpx;}
</style>
